<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>压缩图片demo</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
	<img id="img" src="">
    <div>
        <h4>240比例</h4>
        <input id="file" type="file" onchange="compress()">
    </div>
	<hr>
    <div>
        <h4>强制比例</h4>
        <input id="file_x" type="file" onchange="compress_x()">
    </div>
<br>
    <button onclick="download()">下载</button>
</body>
<script>

// 对图片进行压缩
function compress() {
    //宽240 高等比缩放
    let fileObj = document.getElementById('file').files[0] //上传文件的对象
    let reader = new FileReader()
    reader.readAsDataURL(fileObj)
    reader.onload = function(e) {
        let image = new Image() //新建一个img标签（还没嵌入DOM节点)
        image.src = e.target.result
        image.onload = function() {
            canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            imageWidth = 240,   //压缩后图片的大小
            imageHeight = image.height/(image.width/240),
            data = ''
            canvas.width = imageWidth
            canvas.height = imageHeight
            context.drawImage(image, 0, 0, imageWidth, imageHeight)
            data = canvas.toDataURL('image/jpeg')
            //压缩完成
            document.getElementById('img').src = data
        }
    }
}


// 对图片进行压缩
function compress_x() {
    //宽240 高等比缩放
    let fileObj = document.getElementById('file_x').files[0] //上传文件的对象
    let reader = new FileReader()
    reader.readAsDataURL(fileObj)
    reader.onload = function(e) {
        let image = new Image() //新建一个img标签（还没嵌入DOM节点)
        image.src = e.target.result
        image.onload = function() {
            canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            imageWidth = 240,   //压缩后图片的大小
            imageHeight = 320,
            data = ''
            canvas.width = imageWidth
            canvas.height = imageHeight
            context.drawImage(image, 0, 0, imageWidth, imageHeight)
            data = canvas.toDataURL('image/jpeg',0.2)
            //压缩完成
            document.getElementById('img').src = data
        }
    }
}

function download() {
        // 通过 API 获取目标 canvas 元素
        // const canvas = document.querySelector("#canvas");

        // 创建一个 a 标签，并设置 href 和 download 属性
        const el = document.createElement("a");
        // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
        el.href = canvas.toDataURL("image/jpeg",0.8);
        el.download = "a.jpg";

        // 创建一个点击事件并对 a 标签进行触发
        // const event = new MouseEvent("cick");
        // el.dispatchEvent(event);
        $.ajax({
            type:'post',
            url:"update",
            data:{
                img:el.href
            },
            success:function(data){
                console.log(data);
            }
        })
        el.click();
    }
</script>
</html>
